<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>Metro City Panic!</title>
	<script type="text/javascript" src="src/data/text.js"></script>
	<script type="text/javascript" src="src/data/Colors.js"></script>
	<script type="text/javascript" src="src/data/Characters.js"></script>
	<script type="text/javascript" src="src/data/Tiles.js"></script>
	<script type="text/javascript" src="src/data/docs.js"></script>
	<script type="text/javascript" src="src/data/mobiles.js"></script>
	<script type="text/javascript" src="src/data/items.js"></script>
	<script type="text/javascript" src="src/data/spells.js"></script>
	<script type="text/javascript" src="src/data/skills.js"></script>
	<script type="text/javascript" src="src/data/staticLevels.js"></script>
	<script type="text/javascript" src="src/json2.js"></script>
	<script type="text/javascript" src="src/ron.js"></script>
	<script type="text/javascript" src="src/util.js"></script>
	<script type="text/javascript" src="src/dhack.js"></script>
	<script type="text/javascript" src="src/Screen.js"></script>
	<script type="text/javascript" src="src/Map.js"></script>
	<script type="text/javascript" src="src/Effect.js"></script>
	<script type="text/javascript" src="src/Spell.js"></script>
	<script type="text/javascript" src="src/Skill.js"></script>
	<script type="text/javascript" src="src/mode/MessageLogMode.js"></script>
	<script type="text/javascript" src="src/mode/TextReaderMode.js"></script>
	<script type="text/javascript" src="src/mode/MapMode.js"></script>
	<script type="text/javascript" src="src/mode/MainMenuMode.js"></script>
	<script type="text/javascript" src="src/mode/MenuListMode.js"></script>
	<script type="text/javascript" src="src/mode/TitleMode.js"></script>
	<script type="text/javascript" src="src/mode/StatusMode.js"></script>
	<script type="text/javascript" src="src/mode/HelpLibraryMode.js"></script>
	<script type="text/javascript" src="src/mode/InventoryMode.js"></script>
	<script type="text/javascript" src="src/mode/SelectPositionMode.js"></script>
	<script type="text/javascript" src="src/Entity/Entity.js"></script>
	<script type="text/javascript" src="src/Entity/Door.js"></script>
	<script type="text/javascript" src="src/Entity/Corpse.js"></script>
	<script type="text/javascript" src="src/Entity/Item.js"></script>
	<script type="text/javascript" src="src/Entity/Controller.js"></script>
	<script type="text/javascript" src="src/Entity/Mobile.js"></script>
	<script type="text/javascript" src="src/Entity/Player.js"></script>
	<style type="text/css">
	@font-face
	{
		font-family: 'ProFontWindowsRegular';
		src: url('ProFontWindows-webfont.eot');
		src: local('☺'), url('ProFontWindows-webfont.woff') format('woff'), url('ProFontWindows-webfont.ttf') format('truetype'), url('ProFontWindows-webfont.svg#webfontB74F5bC1') format('svg');
		font-weight: normal;
		font-style: normal;
	}
	body, html
	{
		background-color: black;
		height: 100%;
	}
	</style>
	<script type="text/javascript">
		/** Host interface for html5 web browsers.
		*/
		var host = {
			/** Input map table for character keys */
			_charInputMap:
			{
				32:  "menu",
				42:  "inventory",
				43:  "cancel",
				44:  "use",
				46:  "rest",
				47:  "help",
				48:  "menu",
				50:  "down",
				51:  "look",
				52:  "left",
				53:  "rest",
				54:  "right",
				55:  "cast",
				56:  "up",
				57:  "throw",
				63:  "help",
				97:  "inventory",
				99:  "cast",
				100: "drop",
				101: "equip",
				103: "use",
				104: "left",
				105: "inventory",
				106: "down",
				107: "up",
				108: "right",
				109: "cast",
				115: "cast",
				116: "throw",
				117: "unequip",
				119: "wield",
				120: "look",
				122: "rest"
			},
			/** Input map table for non-character keys. */
			_nonCharInputMap:
			{
				13:  "use",
				27:  "cancel",
				33:  "logup",
				34:  "logdown",
				35:  "historydown",
				36:  "historyup",
				37:  "left",
				38:  "up",
				39:  "right",
				40:  "down"
			},
			/** Table of colors for our display. */
			_colorTable:
			[
				'rgb(0  ,0  ,0  )',
				'rgb(170,0  ,0  )',
				'rgb(0  ,170,0  )',
				'rgb(170,85 ,0  )',
				'rgb(0  ,0  ,170)',
				'rgb(170,0  ,170)',
				'rgb(0  ,170,170)',
				'rgb(170,170,170)',
				'rgb(85 ,85 ,85 )',
				'rgb(255,0  ,0  )',
				'rgb(0  ,255,0  )',
				'rgb(255,255,0  )',
				'rgb(0  ,0  ,255)',
				'rgb(255,0  ,255)',
				'rgb(0  ,255,255)',
				'rgb(255,255,255)'
			],
			/** Table of Unicode equivalents for CP437 characters. */
			_cp437ToUtf8:
			[
				'&#x2007;',
				'&#x263A;',
				'&#x263B;',
				'&#x2665;',
				'&#x2666;',
				'&#x2663;',
				'&#x2660;',
				'&#x2022;',
				'&#x25D8;',
				'&#x25CB;',
				'&#x25D9;',
				'&#x2642;',
				'&#x2640;',
				'&#x266A;',
				'&#x266B;',
				'&#x263C;',
				'&#x25BA;',
				'&#x25C4;',
				'&#x2195;',
				'&#x203C;',
				'&#x00B6;',
				'&#x00A7;',
				'&#x25AC;',
				'&#x21A8;',
				'&#x2191;',
				'&#x2193;',
				'&#x2192;',
				'&#x2190;',
				'&#x221F;',
				'&#x2194;',
				'&#x25B2;',
				'&#x25BC;',
				'&#x0020;',
				'&#x0021;',
				'&#x0022;',
				'&#x0023;',
				'&#x0024;',
				'&#x0025;',
				'&#x0026;',
				'&#x0027;',
				'&#x0028;',
				'&#x0029;',
				'&#x002a;',
				'&#x002b;',
				'&#x002c;',
				'&#x002d;',
				'&#x002e;',
				'&#x002f;',
				'&#x0030;',
				'&#x0031;',
				'&#x0032;',
				'&#x0033;',
				'&#x0034;',
				'&#x0035;',
				'&#x0036;',
				'&#x0037;',
				'&#x0038;',
				'&#x0039;',
				'&#x003a;',
				'&#x003b;',
				'&#x003c;',
				'&#x003d;',
				'&#x003e;',
				'&#x003f;',
				'&#x0040;',
				'&#x0041;',
				'&#x0042;',
				'&#x0043;',
				'&#x0044;',
				'&#x0045;',
				'&#x0046;',
				'&#x0047;',
				'&#x0048;',
				'&#x0049;',
				'&#x004a;',
				'&#x004b;',
				'&#x004c;',
				'&#x004d;',
				'&#x004e;',
				'&#x004f;',
				'&#x0050;',
				'&#x0051;',
				'&#x0052;',
				'&#x0053;',
				'&#x0054;',
				'&#x0055;',
				'&#x0056;',
				'&#x0057;',
				'&#x0058;',
				'&#x0059;',
				'&#x005a;',
				'&#x005b;',
				'&#x005c;',
				'&#x005d;',
				'&#x005e;',
				'&#x005f;',
				'&#x0060;',
				'&#x0061;',
				'&#x0062;',
				'&#x0063;',
				'&#x0064;',
				'&#x0065;',
				'&#x0066;',
				'&#x0067;',
				'&#x0068;',
				'&#x0069;',
				'&#x006a;',
				'&#x006b;',
				'&#x006c;',
				'&#x006d;',
				'&#x006e;',
				'&#x006f;',
				'&#x0070;',
				'&#x0071;',
				'&#x0072;',
				'&#x0073;',
				'&#x0074;',
				'&#x0075;',
				'&#x0076;',
				'&#x0077;',
				'&#x0078;',
				'&#x0079;',
				'&#x007a;',
				'&#x007b;',
				'&#x007c;',
				'&#x007d;',
				'&#x007e;',
				'&#x007f;',
				'&#x00c7;',
				'&#x00fc;',
				'&#x00e9;',
				'&#x00e2;',
				'&#x00e4;',
				'&#x00e0;',
				'&#x00e5;',
				'&#x00e7;',
				'&#x00ea;',
				'&#x00eb;',
				'&#x00e8;',
				'&#x00ef;',
				'&#x00ee;',
				'&#x00ec;',
				'&#x00c4;',
				'&#x00c5;',
				'&#x00c9;',
				'&#x00e6;',
				'&#x00c6;',
				'&#x00f4;',
				'&#x00f6;',
				'&#x00f2;',
				'&#x00fb;',
				'&#x00f9;',
				'&#x00ff;',
				'&#x00d6;',
				'&#x00dc;',
				'&#x00a2;',
				'&#x00a3;',
				'&#x00a5;',
				'&#x20a7;',
				'&#x0192;',
				'&#x00e1;',
				'&#x00ed;',
				'&#x00f3;',
				'&#x00fa;',
				'&#x00f1;',
				'&#x00d1;',
				'&#x00aa;',
				'&#x00ba;',
				'&#x00bf;',
				'&#x2310;',
				'&#x00ac;',
				'&#x00bd;',
				'&#x00bc;',
				'&#x00a1;',
				'&#x00ab;',
				'&#x00bb;',
				'&#x2591;',
				'&#x2592;',
				'&#x2593;',
				'&#x2502;',
				'&#x2524;',
				'&#x2561;',
				'&#x2562;',
				'&#x2556;',
				'&#x2555;',
				'&#x2563;',
				'&#x2551;',
				'&#x2557;',
				'&#x255d;',
				'&#x255c;',
				'&#x255b;',
				'&#x2510;',
				'&#x2514;',
				'&#x2534;',
				'&#x252c;',
				'&#x251c;',
				'&#x2500;',
				'&#x253c;',
				'&#x255e;',
				'&#x255f;',
				'&#x255a;',
				'&#x2554;',
				'&#x2569;',
				'&#x2566;',
				'&#x2560;',
				'&#x2550;',
				'&#x256c;',
				'&#x2567;',
				'&#x2568;',
				'&#x2564;',
				'&#x2565;',
				'&#x2559;',
				'&#x2558;',
				'&#x2552;',
				'&#x2553;',
				'&#x256b;',
				'&#x256a;',
				'&#x2518;',
				'&#x250c;',
				'&#x2588;',
				'&#x2584;',
				'&#x258c;',
				'&#x2590;',
				'&#x2580;',
				'&#x03b1;',
				'&#x00df;',
				'&#x0393;',
				'&#x03c0;',
				'&#x03a3;',
				'&#x03c3;',
				'&#x00b5;',
				'&#x03c4;',
				'&#x03a6;',
				'&#x0398;',
				'&#x03a9;',
				'&#x03b4;',
				'&#x221e;',
				'&#x03c6;',
				'&#x03b5;',
				'&#x2229;',
				'&#x2261;',
				'&#x00b1;',
				'&#x2265;',
				'&#x2264;',
				'&#x2320;',
				'&#x2321;',
				'&#x00f7;',
				'&#x2248;',
				'&#x00b0;',
				'&#x2219;',
				'&#x00b7;',
				'&#x221a;',
				'&#x207f;',
				'&#x00b2;',
				'&#x25a0;',
				'&#x00a0;'
			],
			/** Input action consumer method. */
			inputConsumer: null,
			/** The screen buffer. */
			screen: null,
			/** The width of a character in pixels. */
			_cellWidth: 10,
			/** The height of a character in pixels. */
			_cellHeight: 18,
			/** Font family. */
			_fontFamily: "'Courier New', ProFontWindowsRegular, monospace",
			/** Font weight. */
			_fontWeight: "normal",
			/** Font size. */
			_fontSize: "16px",
			/** The DOM Node of the base screen div. */
			_screenDiv: null,
			/** Array of screen cell div DOM nodes. */
			_cells: null,
			/** Width of the screen in cells. */
			_width: 0,
			/** Height of the screen in cells. */
			_height: 0,
			/** Input handling flag. */
			_nonChar: false,
			/** The stack of functions to call at exit time. */
			_atExitStack: [],
			/** Initialize the input and display.
			@param width Width of the display in cells.
			@param height Height of the display in cells.
			@param inputConsumer Input consumer (may be null).
			*/
			init: function(width, height, inputConsumer)
			{
				var self = this;

				// TODO Implement Chrome Frame support
				this.inputConsumer = inputConsumer;
				this._setUpDisplay(width, height);

				// Browser hooking
				document.onkeydown = function(e)
				{
					return host.keyDown(e);
				}
				document.onkeypress = function(e)
				{
					return host.keyDown(e);
				}
				window.onbeforeunload = function(){self._doAtExit()};

				// Special "active" screen buffer object
				function ActiveScreenBuffer() {}
				ActiveScreenBuffer.prototype = new ScreenBuffer(width, height);
				ActiveScreenBuffer.prototype.setBufferCell = ActiveScreenBuffer.prototype.setCell;
				ActiveScreenBuffer.prototype.setCell = this._setScreenCell;
				this.screen = new ActiveScreenBuffer();
				this.screen.width = width;
				this.screen.height = height;
			},
			/** Register a function to be called at exit time.
			 *@param func The function to call.
			 */
			atExit: function(func)
			{
				this._atExitStack.push(func);
			},
			/** The onbeforeunload handler.
			 */
			_doAtExit: function()
			{
				for(var i = 0; i < this._atExitStack.length; ++i)
					this._atExitStack[i]();
			},
			/** Keyboard input handling.
			@param e The event object.
			*/
			keyDown: function(e)
			{
				var c, action = "none";
				var evt = (e) ? e : window.event;

				if(evt.type == "keydown")
				{
					c = evt.keyCode;
					if(c <16 ||
						(c> 16 && c <32) ||
						(c> 32 && c <41) ||
						c == 46)
					{
						this._nonChar = true;

						// Handle non-character keys
						if(this._nonCharInputMap.hasOwnProperty(c))
							action = this._nonCharInputMap[c];
						if(action != "none")
							this.dispatchInputAction(action);

						try
						{
							if(Event.stop)
								Event.stop(evt);
						}
						catch(exp){}
						evt.returnValue = false;
					}
					else
						this._nonChar = false;
				}
				else
				{
					if(this._nonChar)
						return true;
					c = (evt.charCode) ? evt.charCode : evt.keyCode;
					if(c> 31 && c < 256)
					{
						if(this._charInputMap.hasOwnProperty(c))
							action = this._charInputMap[c];
						this.dispatchInputAction(action, String.fromCharCode(c));

						try
						{
							if(Event.stop)
								Event.stop(evt);
						}
						catch(exp){}
						evt.returnValue = false;
					}
				}
				return evt.returnValue;
			},
			/** Dispatches a single input action.
			@param action Name of the action.
			@param chr The character string that prompted the action (optional).
			*/
			dispatchInputAction: function(action, chr)
			{
				if(this.inputConsumer !== null)
					this.inputConsumer(action, chr);
			},
			/** Test is saving is available.
			 */
			isSaveAvailable: function()
			{
				if(window.localStorage)
					return true;
				return false;
			},
			/** Test if a value is available.
			 *@param key THe key name of the value.
			 */
			isValueAvailable: function(key)
			{
				if(!window.localStorage)
					throw "Save feature is not available in this browser.";
				if(window.localStorage[key] !== undefined &&
					window.localStorage[key] !== null &&
					window.localStorage[key].length > 0)
					return true;
				return false;
			},
			/** Save a key-value pair.
			 * @param key The key name.
			 * @param value The value to store.
			 */
			saveData: function(key, value)
			{
				if(!window.localStorage)
					throw "Save feature is not available in this browser.";
				window.localStorage[key] = value;
			},
			/** Loads a key-value pair.
			 *@param key The key name.
			 */
			loadData: function(key)
			{
				if(!window.localStorage)
					throw "Save feature is not available in this browser.";
				return window.localStorage[key];
			},
			/** Delete a key-value pair.
			 *@param key The key name.
			 */
			deleteData: function(key)
			{
				if(!window.localStorage)
					throw "Save feature is not available in this browser.";
				window.localStorage[key] = "";
				delete(window.localStorage[key]);
			},
			/** Set a screen cell.
			@param x X position.
			@param y Y position.
			@param c Character to put into the cell.
			@param bg Background color of the cell.
			@param fg Foreground color of the cell.
			*/
			_setScreenCell: function(x, y, c, fg, bg)
			{
				if(x < 0 ||
					y < 0 ||
					x >= this.width ||
					y >= this.height)
					return;
				var cell = this._cells[y * this.width + x];
				if(typeof(c) == "string")
					c = c.charCodeAt(0);
				if(c !== null)
					c &= 0xff;
				var cellDiv = host._cells[y * host._width + x];
				if(c !== null &&
					(cell & 0x00ff) != c)
				{
					cell = (cell & 0xff00) | c;
					cellDiv.firstChild.innerHTML = host._cp437ToUtf8[c];
				}
				if(fg !== null &&
					((cell & 0x0f00) >> 8) != fg)
				{
					cell = (cell & 0xf0ff) | (fg << 8);
					cellDiv.style.color = host._colorTable[fg];
				}
				if(bg !== null &&
					((cell & 0xf000) >> 12) != bg)
				{
					cell = (cell & 0x0fff) | (bg << 12);
					cellDiv.style.backgroundColor = host._colorTable[bg];
				}
				this._cells[y * this.width + x] = cell;
			},
			/** (re)Initialize the display.
			@param width Width of the display in cells.
			@param height Height of the display in cells.
			*/
			_setUpDisplay: function(width, height)
			{
				this._removeChildren(document.getElementById("screen_container"));
				this._width = width;
				this._height = height;
				this._screenDiv = document.createElement("div");
				this._screenDiv.style.width = (width * this._cellWidth + 1) + "px";
				this._screenDiv.style.height = (height * this._cellHeight + 1) + "px";
				this._screenDiv.style.position = "relative";
				this._screenDiv.style.padding = "0";
				this._screenDiv.style.margin = "0";
				this._screenDiv.style.fontFamily = this._fontFamily;
				this._screenDiv.style.fontSize = this._fontSize;
				this._screenDiv.style.border = "4px double white";
				this._cells = [];
				for(var y = 0; y < height; ++y)
				{
					for(var x = 0; x < width; ++x)
					{
						var cellDiv = document.createElement("div");
						cellDiv.style.width = (this._cellWidth + 1) + "px";
						cellDiv.style.height = (this._cellHeight + 1) + "px";
						cellDiv.style.textAlign = "center";
						cellDiv.style.backgroundColor = "#000000";
						cellDiv.style.position = "absolute";
						cellDiv.style.top = (y * this._cellHeight) + "px";
						cellDiv.style.left = (x * this._cellWidth) + "px";
						cellDiv.style.padding = "0";
						cellDiv.style.margin = "0";
						cellDiv.style.border = "none";
						var inner = document.createElement("div");
						inner.style.position = "absolute";
						inner.style.top = "0px";
						inner.style.left = "0px";
						inner.style.padding = "0";
						inner.style.margin = "0";
						inner.style.textAlign = "center";
						inner.style.width = this._cellWidth + "px";
						inner.style.height = this._cellHeight + "px";
						inner.style.border = "none";
						inner.style.fontWeight = this._fontWeight;
						cellDiv.appendChild(inner);
						this._cells[y * this._width + x] = cellDiv;
						this._screenDiv.appendChild(cellDiv);
					}
				}
				document.getElementById("screen_container").appendChild(this._screenDiv);
			},
			/** Remove all children from a DOM Node.
			@param node Node to remove children from.
			*/
			_removeChildren: function(node)
			{
				while(node.hasChildNodes())
				{
					node.removeChild(node.lastChild);
				}
			}
		};
	</script>
</head>

<body onload="dhack.main()"
	style="padding: 0; margin: 0;">
	<table width="100%" height="100%" cellspacing="0" cellpadding="0">
		<tr height="100%">
			<td align="center" valign="center" id="screen_container">
				<p>Loading...</p>
			</td>
		</tr>
	</table>
</body>

</html>
